<%--
  Created by IntelliJ IDEA.
  User: xi
  Date: 13-5-31
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <script src="../admin/res/plugin/jquery/jquery-1.10.2.min.js"></script>
    <script src="../admin/res/plugin/bootstrap/js/bootstrap.js"></script>
    <script src="../admin/res/plugin/jcrop/js/jquery.Jcrop.js"></script>
    <script src="../admin/res/plugin/jcrop/js/jquery.color.js"></script>

    <link href="../admin/res/plugin/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../admin/res/plugin/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="../admin/res/plugin/jcrop/demos/demo_files/main.css" type="text/css"/>
    <link rel="stylesheet" href="../admin/res/plugin/jcrop/demos/demo_files/demos.css" type="text/css"/>
    <link rel="stylesheet" href="../admin/res/plugin/jcrop/css/jquery.Jcrop.css" type="text/css"/>

    <script type="text/javascript">

        $(function () {
            $("#target").dblclick(function () {
                $("#imgFile").click();
            });
            $("#bgImg").dblclick(function () {
                $("#imgFile").click();
            });
            var jcrop_api,
                    boundx,
                    boundy,
                    $preview = $('#preview-pane'),
                    $pcnt = $('#preview-pane .preview-container'),
                    $pimg = $('#preview-pane .preview-container img'),
                    xsize,
                    ysize,
                    $target = $("#target"),
                    rate,
                    ww,
                    yy,
                    $infoPanel = $("<span></span>");

            //暂缓执行，主要征对chrome
            setTimeout(function () {
                xsize = $pcnt.width();
                ysize = $pcnt.height();
                ww = $pimg.width();
                yy = $pimg.height();
                rate = ww / $target.width();
                $("#oldArea").html(ww + "x" + yy);
                if (jcrop_api) {
                    jcrop_api.setSelect([0, 0, 130, 130]);
                }
            }, 500);


            $('#target').Jcrop({
                onChange: showCoords,
                onSelect: showCoords,
                // onRelease: clearCoords,
                aspectRatio: 1
                //aspectRatio: xsize / ysize
            }, function () {
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                jcrop_api = this;
                jcrop_api.setSelect([0, 0, 130, 130]);
                $preview.appendTo(jcrop_api.ui.holder);
            });

            //
            $("img#target").error(function () {
                $infoPanel.html("双击上传图片");
                $(this).after($infoPanel);
                $(this).hide();
            });
            $("img#previewImg").error(function () {
                $(this).hide();
            });
            $("img#photo").error(function () {
//                $(this).attr("src", "/upps/res/images/u_c_u_photo.png");
            });
            // event handlers, as per the Jcrop invocation above
            function showCoords(c) {
                $('#x1').val(parseInt(rate * c.x));
                $('#y1').val(parseInt(rate * c.y));
                $('#x2').val(parseInt(rate * c.x2));
                $('#y2').val(parseInt(rate * c.y2));
                $('#w').val(parseInt(rate * c.w));
                $('#h').val(parseInt(rate * c.h));
                $("#imgArea").html(parseInt(rate * c.w) + "x" + parseInt(rate * c.h));
                updatePreview(c);
            }

            function clearCoords() {
                $('#coords input').val('');
            }

            function updatePreview(c) {
                if (parseInt(c.w) > 0) {
                    var rx = xsize / c.w;
                    var ry = ysize / c.h;
                    $pimg.css({
                        width: Math.round(rx * boundx) + 'px',
                        height: Math.round(ry * boundy) + 'px',
                        marginLeft: '-' + Math.round(rx * c.x) + 'px',
                        marginTop: '-' + Math.round(ry * c.y) + 'px'
                    });
                    $("#updateBtn").removeAttr("disabled");
                }
            }

            $("#imgFile").change(function () {
                var fileReg = /(.jpg|.jpeg|.png)$/g;
                var fileName = $(this).val();
                if (fileReg.test(fileName)) {
                    $target.attr("src", "/upps/res/images/loading_circle.gif").show();
                    $infoPanel.html("文件上传中，请稍后...");
                    $target.after($infoPanel);
                    $("#imgForm").submit();
                } else {
                    alert("请选择*.jpg,*.jpg,*.png格式的图片上传!");
                }
            });
        });

    </script>
    <style type="text/css">
        .toolBar {
            display: block;
            position: absolute;
            bottom: 0px;
            vertical-align: middle;
        }

        form {
            margin: auto;
        }

        body {
            font-size: 12px;
        }

            /* Apply these styles only when #preview-pane has
               been placed within the Jcrop widget */
        .jcrop-holder #preview-pane, .img-pane {
            display: block;
            position: absolute;
            z-index: 2000;
            top: 10px;
            right: -280px;
            padding: 6px;
            border: 1px rgba(0, 0, 0, .4) solid;
            background-color: white;

            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;

            -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        }

            /* The Javascript code will set the aspect ratio of the crop
               area based on the size of the thumbnail preview,
               specified here */
        #preview-pane .preview-container {
            width: 160px;
            height: 160px;
            overflow: hidden;
        }

        #userName {
            display: block;
            position: fixed;
            right: 10px;
            text-align: center;
            top: 203px;
            width: 155px;
        }

        .clearfix {
            background: none repeat scroll 0 0 #FFFFFF;
            bottom: 0;
            display: block;
            height: 100%;
            position: absolute;
            right: 170px;
            top: 0;
            width: 1px;
            z-index: 9999;
        }

    </style>
</head>
<body>
<div>
    <div style="margin-top: 10px;margin-bottom: 10px;">
        <form style="padding-left: 10px;" action="/jcrop/upload" name="imgForm1" id="imgForm"
              enctype="multipart/form-data" method="POST">
            请选择头像图片:<input type="file" id="imgFile" name="imgFile"/>
            <span style="color: red;">上传图片格式 *.jpg,*.jpeg,*.png,大小不超过2M.</span>
        </form>
    </div>
    <div id="bgImg"
         style="position: absolute;background-color: #EDEDED;top: 50px;left: 10px;right: 10px;bottom: 66px;padding: 5px; border: 1px solid #dddddd;">
        <img alt="双击选择图片" title="双击选择图片"
             style="max-height: 100%;display: block;font-size: 24px; line-height: 24px; width: auto;"
             id="target"
             src="/upload/temp/${imgFile}"/>

        <div id="preview-pane"
             style="display: block; position: fixed;  right: 15px; top: 55px; z-index: 10000;text-align: center;">
            <div class="preview-container">

                <img alt="${imgName}" imgId="${imgId}" id="previewImg"  class="jcrop-preview"
                        <c:if test="${photoUrl == null}">
                            src="/upload/temp/${imgFile}"
                        </c:if>
                        <c:if test="${photoUrl != null}">
                            src="${photoUrl}"
                        </c:if>
                        />
            </div>
            <span>图像预览</span>
        </div>

        <%--<div class="img-pane"--%>
        <%--style="display: block;position: absolute;right: 5px;top: 5px;width:130px; text-align: center;">--%>
        <%--<div class="preview-container">--%>
        <%--<img title="${imgName}" id="photo" imgId="${imgId}" style="display: block;" src="${photoUrl}"/>--%>
        <%--</div>--%>
        <%--</div>--%>
        <%--<span id="userName"></span>--%>
    </div>

    <div class="toolBar modal-footer" style="position: absolute;bottom: 0px;left: 0px; right: 0px;">
        <form action="/jcrop/cut">
            <input name="imgName" type="hidden" value="${imgFile}"/>

            <div style="visibility: hidden; height: 0px;">
                <span>X1 <input readonly type="text" class="span1" size="4" id="x1" name="x"/></span>
                <span>Y1 <input readonly type="text" class="span1" size="4" id="y1" name="y"/></span>
                <span>X2 <input readonly type="text" class="span1" size="4" id="x2" name="x2"/></span>
                <span>Y2 <input readonly type="text" class="span1" size="4" id="y2" name="y2"/></span>
                <span>W <input readonly type="text" class="span1" size="4" id="w" name="w"/></span>
                <span>H <input readonly type="text" class="span1" size="4" id="h" name="h"/></span>
            </div>
            <button type="submit" disabled="disabled" id="updateBtn"
                    class="btn btn-primary pull-right span2" style="margin-right: 23px;"
                    >提 交
            </button>

            <div style="bottom: 18px;  left: 10px; position: fixed;">
                图像大小:<span id="oldArea"></span>
                选区大小:<span id="imgArea">0x0</span> - px
            </div>
        </form>
    </div>
</div>
<%--<div class="clearfix"></div>--%>
</body>
</html>